<template>
  <div>
    <el-card class="cardBox">
      <splitpanes class="default-theme splitStyle" style="height: 80vh;" @resized="handleResize">
        <pane size="15">
          <!-- 左边 -->
          <div class="search-tree-container">
            <!-- 搜索框 -->
            <div style="margin-bottom: 20px;">
              <el-input v-model="searchKeyword" placeholder="请输入搜索内容" clearable @input="handleSearch">
                <template #prefix>
                  <el-icon>
                    <search />
                  </el-icon>
                </template>
              </el-input>
            </div>

            <!-- 树形组件 -->
            <el-scrollbar height="70vh">
              <el-tree ref="treeRef" show-checkbox :data="filteredTreeData" :props="treeProps"
                :filter-node-method="filterNode" highlight-current @check="handleCheck" node-key="value"
                default-expand-all current-node-key />
            </el-scrollbar>
          </div>
        </pane>

        <pane size="85" style="margin-left: 15px;">
          <!-- 右边 -->
          <div class="curve-container">
            <h2>实时曲线图</h2>
            <div ref="chartRef" class="chart-container"></div>
            <div class="controls">
              <el-button type="primary" @click="startAnimation" :disabled="isAnimating">查询</el-button>
              <el-button type="danger" @click="stopAnimation" :disabled="!isAnimating">清空</el-button>
              <el-button @click="resetZoom">重置缩放</el-button>
            </div>

            <div class="data-table">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="设备属性" min-width="120" align="center" />
                <el-table-column prop="startTime" label="开始时间" min-width="120" align="center" />
                <el-table-column prop="currentTime" label="当前时间" min-width="120" align="center" />
                <el-table-column prop="maxValue" label="最大值" min-width="120" align="center">
                  <template #default="{ row }">
                    {{ row.maxValue !== null ? row.maxValue.toFixed(2) : "" }}
                  </template>
                </el-table-column>
                <el-table-column prop="minValue" label="最小值" min-width="120" align="center">
                  <template #default="{ row }">
                    {{ row.minValue !== null ? row.minValue.toFixed(2) : "" }}
                  </template>
                </el-table-column>
                <el-table-column prop="avgValue" label="平均值" min-width="120" align="center">
                  <template #default="{ row }">
                    {{ row.avgValue !== null ? row.avgValue.toFixed(2) : "" }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </pane>
      </splitpanes>
    </el-card>

    <!-- 公司log -->
    <el-row>
      <div class="kx-log-box">
        <img class="kx-img" src="@/assets/images/kxauto.png" alt="描述图片的文字" />
        <span>开轩自动化</span>

        <span class="kx-hezuo">
          商务合作：18509234888（同微信） 技术支持：18691805301（同微信）
        </span>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, computed } from "vue";
import * as echarts from "echarts";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import { Search } from "@element-plus/icons-vue";

import { operator } from "@/utils/op_enums";
import { NamePD_22, NamePD_31, NamePD_22_N, NamePD_42, NamePD_42_2, NamePD_42_N, NamePD_52, NamePD_52_2, NamePD_52_N, NamePD_Main, NamePD_101 } from "@/utils/beltPositioningMethod.ts";
import { act } from "@/utils/websocket"; //引入websocket

// 监听websocket数据变化
watch(act, (newVal) => {
  console.log("act 变化了，新值:", newVal);
}, { deep: true });

// 图表数据接口
interface DataPoint {
  time: string; // 完整时间字符串，格式为YYYY-MM-DD HH:mm:ss
  values: number[]; // 每条曲线对应的数值数组
}

// 响应式变量
let chartInstance: echarts.ECharts | null = null; // echarts实例引用
let animationTime: number | null = null; // 定时器ID
const chartRef = ref<HTMLElement | null>(null); // 图表DOM元素引用
const chartData = ref<DataPoint[]>([]); // 存储图表所有数据点
const curveNameList = ref<string[]>([]); // 当前选中的曲线名称数组
const curveColorList = ref<string[]>([]); // 曲线的颜色数组
const isAnimating = ref(false); // 是否正在运行动画
const animationStartTime = ref<string | null>(null); // 记录动画开始时间
const dataSinceStart = ref<DataPoint[]>([]); // 存储从开始时间起的所有数据点
const currentZoom = ref({ start: 0, end: 100 }); // 当前缩放范围
const isManualZooming = ref(false); // 是否手动缩放
const selectedNodeValues = ref<number[]>([]); // 存储选中的节点值

// 配置常量
const updateIntervalTime = 5000; // 数据更新间隔5秒，与WebSocket同步

// 表格数据
const tableData = ref<any[]>([]);

// 存储已生成的颜色，防止重复
const generatedColors = new Set<string>(); // Set()可以去重

// 生成唯一的随机颜色(16进制)
const getUniqueRandomColor = (): string => {
  let color = "";
  do {
    // 生成6位16进制颜色代码
    color = `#${Math.floor(Math.random() * 0xffffff)
      .toString(16)
      .padStart(6, "0")}`;
  } while (generatedColors.has(color)); // 确保颜色唯一
  generatedColors.add(color); // 添加到已用颜色集合
  return color;
};

// 格式化日期(YYYY-MM-DD HH:mm:ss)
const formatTimeFull = (date: Date) => {
  const zeroFill = (num: number) => num.toString().padStart(2, "0"); // 补零函数
  return `${date.getFullYear()}-${zeroFill(date.getMonth() + 1)}-${zeroFill(
    date.getDate()
  )} ${zeroFill(date.getHours())}:${zeroFill(date.getMinutes())}:${zeroFill(
    date.getSeconds()
  )}`;
};

// 节点值与数据获取方法的映射
const nodeDataMap = new Map([
  // 2-2大巷皮带 (系统value: 1)
  [11, { name: "1#变频器电流", getData: () => NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2).value }],
  [12, { name: "2#变频器电流", getData: () => NamePD_22("Inv2Curr_AI", operator.Divide, 10, 2).value }],
  [13, { name: "3#变频器电流", getData: () => NamePD_22("Inv3Curr_AI", operator.Divide, 10, 2).value }],
  [14, { name: "1#变频器功率", getData: () => NamePD_22("Inv1Pow_AI", operator.Divide, 10, 2).value }],
  [15, { name: "2#变频器功率", getData: () => NamePD_22("Inv2Pow_AI", operator.Divide, 10, 2).value }],
  [16, { name: "3#变频器功率", getData: () => NamePD_22("Inv3Pow_AI", operator.Divide, 10, 2).value }],
  [17, { name: "1#变频器频率", getData: () => NamePD_22("Inv1Freq_AI", operator.NO, null, 2).value }],
  [18, { name: "2#变频器频率", getData: () => NamePD_22("Inv2Freq_AI", operator.NO, null, 2).value }],
  [19, { name: "3#变频器频率", getData: () => NamePD_22("Inv3Freq_AI", operator.NO, null, 2).value }],

  // 2_2南部 (系统value: 2)
  [21, { name: "变频1运行电流", getData: () => NamePD_22_N("OpCurr1_AI", operator.Divide, 10, 2).value }],
  [22, { name: "变频2运行电流", getData: () => NamePD_22_N("OpCurr2_AI", operator.Divide, 10, 2).value }],
  [23, { name: "变频3运行电流", getData: () => NamePD_22_N("OpCurr3_AI", operator.Divide, 10, 2).value }],
  [24, { name: "变频4运行电流", getData: () => NamePD_22_N("OpCurr4_AI", operator.Divide, 10, 2).value }],
  [25, { name: "变频5运行电流", getData: () => NamePD_22_N("OpCurr5_AI", operator.Divide, 10, 2).value }],
  [26, { name: "变频1运行功率", getData: () => NamePD_22_N("OpPow1_AI", operator.Divide, null, 2).value }],
  [27, { name: "变频2运行功率", getData: () => NamePD_22_N("OpPow2_AI", operator.Divide, null, 2).value }],
  [28, { name: "变频3运行功率", getData: () => NamePD_22_N("OpPow3_AI", operator.Divide, null, 2).value }],
  [29, { name: "变频4运行功率", getData: () => NamePD_22_N("OpPow4_AI", operator.Divide, null, 2).value }],
  [210, { name: "变频5运行功率", getData: () => NamePD_22_N("OpPow5_AI", operator.Divide, null, 2).value }],
  [211, { name: "1#电机U相温度", getData: () => NamePD_22_N("UTmp1_AI", operator.Divide, 10, 2).value }],
  [212, { name: "2#电机U相温度", getData: () => NamePD_22_N("UTmp2_AI", operator.Divide, 10, 2).value }],
  [213, { name: "3#电机U相温度", getData: () => NamePD_22_N("UTmp3_AI", operator.Divide, 10, 2).value }],
  [214, { name: "4#电机U相温度", getData: () => NamePD_22_N("UTmp4_AI", operator.Divide, 10, 2).value }],
  [215, { name: "5#电机U相温度", getData: () => NamePD_22_N("UTmp5_AI", operator.Divide, 10, 2).value }],
  [216, { name: "1#电机V相温度", getData: () => NamePD_22_N("VTmp1_AI", operator.Divide, 10, 2).value }],
  [217, { name: "2#电机V相温度", getData: () => NamePD_22_N("VTmp2_AI", operator.Divide, 10, 2).value }],
  [218, { name: "3#电机V相温度", getData: () => NamePD_22_N("VTmp3_AI", operator.Divide, 10, 2).value }],
  [219, { name: "4#电机V相温度", getData: () => NamePD_22_N("VTmp4_AI", operator.Divide, 10, 2).value }],
  [220, { name: "5#电机V相温度", getData: () => NamePD_22_N("VTmp5_AI", operator.Divide, 10, 2).value }],
  [221, { name: "1#电机W相温度", getData: () => NamePD_22_N("WTmp1_AI", operator.Divide, 10, 2).value }],
  [222, { name: "2#电机W相温度", getData: () => NamePD_22_N("WTmp2_AI", operator.Divide, 10, 2).value }],
  [223, { name: "3#电机W相温度", getData: () => NamePD_22_N("WTmp3_AI", operator.Divide, 10, 2).value }],
  [224, { name: "4#电机W相温度", getData: () => NamePD_22_N("WTmp4_AI", operator.Divide, 10, 2).value }],
  [225, { name: "5#电机W相温度", getData: () => NamePD_22_N("WTmp5_AI", operator.Divide, 10, 2).value }],
  [226, { name: "1#电机水平振动", getData: () => NamePD_22_N("HVib1_AI", operator.NO, null, 2).value }],
  [227, { name: "2#电机水平振动", getData: () => NamePD_22_N("HVib2_AI", operator.NO, null, 2).value }],
  [228, { name: "3#电机水平振动", getData: () => NamePD_22_N("HVib3_AI", operator.NO, null, 2).value }],
  [229, { name: "4#电机水平振动", getData: () => NamePD_22_N("HVib4_AI", operator.NO, null, 2).value }],
  [230, { name: "5#电机水平振动", getData: () => NamePD_22_N("HVib5_AI", operator.NO, null, 2).value }],
  [231, { name: "1#电机垂直振动", getData: () => NamePD_22_N("Vib1_AI", operator.NO, null, 2).value }],
  [232, { name: "2#电机垂直振动", getData: () => NamePD_22_N("Vib2_AI", operator.NO, null, 2).value }],
  [233, { name: "3#电机垂直振动", getData: () => NamePD_22_N("Vib3_AI", operator.NO, null, 2).value }],
  [234, { name: "4#电机垂直振动", getData: () => NamePD_22_N("Vib4_AI", operator.NO, null, 2).value }],
  [235, { name: "5#电机垂直振动", getData: () => NamePD_22_N("Vib5_AI", operator.NO, null, 2).value }],
  [236, { name: "1#电机前轴温度", getData: () => NamePD_22_N("FrontTmp1_AI", operator.Divide, 10, 2).value }],
  [237, { name: "2#电机前轴温度", getData: () => NamePD_22_N("FrontTmp2_AI", operator.Divide, 10, 2).value }],
  [238, { name: "3#电机前轴温度", getData: () => NamePD_22_N("FrontTmp3_AI", operator.Divide, 10, 2).value }],
  [239, { name: "4#电机前轴温度", getData: () => NamePD_22_N("FrontTmp4_AI", operator.Divide, 10, 2).value }],
  [240, { name: "5#电机前轴温度", getData: () => NamePD_22_N("FrontTmp5_AI", operator.Divide, 10, 2).value }],
  [241, { name: "1#电机后轴温度", getData: () => NamePD_22_N("RearTmp1_AI", operator.Divide, 10, 2).value }],
  [242, { name: "2#电机后轴温度", getData: () => NamePD_22_N("RearTmp2_AI", operator.Divide, 10, 2).value }],
  [243, { name: "3#电机后轴温度", getData: () => NamePD_22_N("RearTmp3_AI", operator.Divide, 10, 2).value }],
  [244, { name: "4#电机后轴温度", getData: () => NamePD_22_N("RearTmp4_AI", operator.Divide, 10, 2).value }],
  [245, { name: "5#电机后轴温度", getData: () => NamePD_22_N("RearTmp5_AI", operator.Divide, 10, 2).value }],
  [246, { name: "滚筒温度1", getData: () => NamePD_22_N("HNProtDrumTmp1_AI", operator.NO, null, 2).value }],
  [247, { name: "滚筒温度2", getData: () => NamePD_22_N("HNProtDrumTmp2_AI", operator.NO, null, 2).value }],
  [248, { name: "滚筒温度3", getData: () => NamePD_22_N("HNProtDrumTmp3_AI", operator.NO, null, 2).value }],
  [249, { name: "滚筒温度4", getData: () => NamePD_22_N("HNProtDrumTmp4_AI", operator.NO, null, 2).value }],
  [250, { name: "换热站供水温度1", getData: () => NamePD_22_N("HESupTmp1_AI", operator.Divide, 10, 2).value }],
  [251, { name: "换热站供水温度4", getData: () => NamePD_22_N("HESupTmp4_AI", operator.Divide, 10, 2).value }],
  [252, { name: "换热站回水温度1", getData: () => NamePD_22_N("HERetTmp1_AI", operator.Divide, 10, 2).value }],
  [253, { name: "换热站回水温度4", getData: () => NamePD_22_N("HERetTmp4_AI", operator.Divide, 10, 2).value }],
  [254, { name: "1#换热站压力", getData: () => NamePD_22_N("HEPress1_AI", operator.NO, null, 2).value }],
  [255, { name: "4#换热站压力", getData: () => NamePD_22_N("HEPress4_AI", operator.NO, null, 2).value }],

  // 3-1大巷皮带 (系统value: 3)
  [31, { name: "1#电机前轴温度", getData: () => NamePD_31("FrontTmp1_AI", operator.Divide, 10, 2).value }],
  [32, { name: "2#电机前轴温度", getData: () => NamePD_31("FrontTmp2_AI", operator.Divide, 10, 2).value }],
  [33, { name: "3#电机前轴温度", getData: () => NamePD_31("FrontTmp3_AI", operator.Divide, 10, 2).value }],
  [34, { name: "1#电机后轴温度", getData: () => NamePD_31("RearTmp1_AI", operator.Divide, 10, 2).value }],
  [35, { name: "2#电机后轴温度", getData: () => NamePD_31("RearTmp2_AI", operator.Divide, 10, 2).value }],
  [36, { name: "3#电机后轴温度", getData: () => NamePD_31("RearTmp3_AI", operator.Divide, 10, 2).value }],
  [37, { name: "1#电机U相温度", getData: () => NamePD_31("UTmp1_AI", operator.Divide, 10, 2).value }],
  [38, { name: "2#电机U相温度", getData: () => NamePD_31("UTmp2_AI", operator.Divide, 10, 2).value }],
  [39, { name: "3#电机U相温度", getData: () => NamePD_31("UTmp3_AI", operator.Divide, 10, 2).value }],
  [310, { name: "变频1运行电流", getData: () => NamePD_31("OpCurr1_AI", operator.Divide, 10, 2).value }],
  [311, { name: "变频2运行电流", getData: () => NamePD_31("OpCurr2_AI", operator.Divide, 10, 2).value }],
  [312, { name: "变频3运行电流", getData: () => NamePD_31("OpCurr3_AI", operator.Divide, 10, 2).value }],
  [313, { name: "变频1运行功率", getData: () => NamePD_31("OpPow1_AI", operator.Multiply, 0.71, 2).value }],
  [314, { name: "变频2运行功率", getData: () => NamePD_31("OpPow2_AI", operator.Multiply, 0.71, 2).value }],
  [315, { name: "变频3运行功率", getData: () => NamePD_31("OpPow3_AI", operator.Multiply, 0.71, 2).value }],
  [316, { name: "变频1运行频率", getData: () => NamePD_31("OpFreq1_AI", operator.Divide, 100, 2).value }],
  [317, { name: "变频2运行频率", getData: () => NamePD_31("OpFreq2_AI", operator.Divide, 100, 2).value }],
  [318, { name: "变频3运行频率", getData: () => NamePD_31("OpFreq3_AI", operator.Divide, 100, 2).value }],

  // 4-2大巷一部皮带 (系统value: 4)
  [41, { name: "1#电机前轴温度", getData: () => NamePD_42("Equip1FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [42, { name: "2#电机前轴温度", getData: () => NamePD_42("Equip2FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [43, { name: "3#电机前轴温度", getData: () => NamePD_42("Equip3FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [44, { name: "1#电机后轴温度", getData: () => NamePD_42("Equip1RearShaftTmp_AI", operator.NO, null, 2).value }],
  [45, { name: "2#电机后轴温度", getData: () => NamePD_42("Equip2RearShaftTmp_AI", operator.NO, null, 2).value }],
  [46, { name: "3#电机后轴温度", getData: () => NamePD_42("Equip3RearShaftTmp_AI", operator.NO, null, 2).value }],
  [47, { name: "1#电机U相温度", getData: () => NamePD_42("Equip1UTmp_AI", operator.NO, null, 2).value }],
  [48, { name: "2#电机U相温度", getData: () => NamePD_42("Equip2UTmp_AI", operator.NO, null, 2).value }],
  [49, { name: "3#电机U相温度", getData: () => NamePD_42("Equip3UTmp_AI", operator.NO, null, 2).value }],
  [410, { name: "变频1运行电流", getData: () => NamePD_42("Equip1OpCurr_AI", operator.Divide, 10, 2).value }],
  [411, { name: "变频2运行电流", getData: () => NamePD_42("Equip2OpCurr_AI", operator.Divide, 10, 2).value }],
  [412, { name: "变频3运行电流", getData: () => NamePD_42("Equip3OpCurr_AI", operator.Divide, 10, 2).value }],
  [413, { name: "变频1运行功率", getData: () => NamePD_42("Equip1OpPow_AI", operator.Multiply, 0.71, 2).value }],
  [414, { name: "变频2运行功率", getData: () => NamePD_42("Equip2OpPow_AI", operator.Multiply, 0.71, 2).value }],
  [415, { name: "变频3运行功率", getData: () => NamePD_42("Equip3OpPow_AI", operator.Multiply, 0.71, 2).value }],
  [416, { name: "变频1运行频率", getData: () => NamePD_42("Equip1OpFreq_AI", operator.Divide, 100, 2).value }],
  [417, { name: "变频2运行频率", getData: () => NamePD_42("Equip1OpFreq_AI", operator.Divide, 100, 2).value }],
  [418, { name: "变频3运行频率", getData: () => NamePD_42("Equip1OpFreq_AI", operator.Divide, 100, 2).value }],

  // 4-2大巷二部皮带 (系统value: 5)
  [51, { name: "1#电机绕组温度", getData: () => NamePD_42_2("Motor1WindingTemp_AI", operator.NO, null, 2).value }],
  [52, { name: "2#电机绕组温度", getData: () => NamePD_42_2("Motor2WindingTemp_AI", operator.NO, null, 2).value }],
  [53, { name: "3#电机绕组温度", getData: () => NamePD_42_2("Motor3WindingTemp_AI", operator.NO, null, 2).value }],
  [54, { name: "1#电机前轴温度", getData: () => NamePD_42_2("Motor1FrontShaftTemp_AI", operator.NO, null, 2).value }],
  [55, { name: "2#电机前轴温度", getData: () => NamePD_42_2("Motor2FrontShaftTemp_AI", operator.NO, null, 2).value }],
  [56, { name: "3#电机前轴温度", getData: () => NamePD_42_2("Motor3FrontShaftTemp_AI", operator.NO, null, 2).value }],
  [57, { name: "1#电机后轴温度", getData: () => NamePD_42_2("Motor1RearShaftTemp_AI", operator.NO, null, 2).value }],
  [58, { name: "2#电机后轴温度", getData: () => NamePD_42_2("Motor2RearShaftTemp_AI", operator.NO, null, 2).value }],
  [59, { name: "3#电机后轴温度", getData: () => NamePD_42_2("Motor3RearShaftTemp_AI", operator.NO, null, 2).value }],
  [510, { name: "1#电机冷却出口温度", getData: () => NamePD_42_2("Motor1CoolantOutTemp_AI", operator.NO, null, 2).value }],
  [511, { name: "2#电机冷却出口温度", getData: () => NamePD_42_2("Motor2CoolantOutTemp_AI", operator.NO, null, 2).value }],
  [512, { name: "3#电机冷却出口温度", getData: () => NamePD_42_2("Motor3CoolantOutTemp_AI", operator.NO, null, 2).value }],
  [513, { name: "1#电机冷却进口温度", getData: () => NamePD_42_2("Motor1CoolantInTemp_AI", operator.NO, null, 2).value }],
  [514, { name: "2#电机冷却进口温度", getData: () => NamePD_42_2("Motor2CoolantInTemp_AI", operator.NO, null, 2).value }],
  [515, { name: "3#电机冷却进口温度", getData: () => NamePD_42_2("Motor3CoolantInTemp_AI", operator.NO, null, 2).value }],

  // 4-2南一部皮带 (系统value: 6)
  [61, { name: "1#电机绕组温度", getData: () => NamePD_42_N("Mot1WindingTmp_AI", operator.NO, null, 2).value }],
  [62, { name: "2#电机绕组温度", getData: () => NamePD_42_N("Mot2WindingTmp_AI", operator.NO, null, 2).value }],
  [63, { name: "3#电机绕组温度", getData: () => NamePD_42_N("Mot3WindingTmp_AI", operator.NO, null, 2).value }],
  [64, { name: "1#电机前轴温度", getData: () => NamePD_42_N("Mot1FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [65, { name: "2#电机前轴温度", getData: () => NamePD_42_N("Mot2FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [66, { name: "3#电机前轴温度", getData: () => NamePD_42_N("Mot3FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [67, { name: "1#电机后轴温度", getData: () => NamePD_42_N("Mot1RearShaftTmp_AI", operator.NO, null, 2).value }],
  [68, { name: "2#电机后轴温度", getData: () => NamePD_42_N("Mot2RearShaftTmp_AI", operator.NO, null, 2).value }],
  [69, { name: "3#电机后轴温度", getData: () => NamePD_42_N("Mot3RearShaftTmp_AI", operator.NO, null, 2).value }],
  [610, { name: "1#电机冷却出口温度", getData: () => NamePD_42_N("Mot1CoolantOutTmp_AI", operator.NO, null, 2).value }],
  [611, { name: "2#电机冷却出口温度", getData: () => NamePD_42_N("Mot2CoolantOutTmp_AI", operator.NO, null, 2).value }],
  [612, { name: "3#电机冷却出口温度", getData: () => NamePD_42_N("Mot3CoolantOutTmp_AI", operator.NO, null, 2).value }],
  [613, { name: "1#电机冷却进口温度", getData: () => NamePD_42_N("Mot1CoolantInTmp_AI", operator.NO, null, 2).value }],
  [614, { name: "2#电机冷却进口温度", getData: () => NamePD_42_N("Mot2CoolantInTmp_AI", operator.NO, null, 2).value }],
  [615, { name: "3#电机冷却进口温度", getData: () => NamePD_42_N("Mot3CoolantInTmp_AI", operator.NO, null, 2).value }],

  // 5-2大巷一部皮带 (系统value: 7)
  [71, { name: "1#电机前轴温度", getData: () => NamePD_52("Equip1FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [72, { name: "2#电机前轴温度", getData: () => NamePD_52("Equip2FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [73, { name: "3#电机前轴温度", getData: () => NamePD_52("Equip3FrontShaftTmp_AI", operator.NO, null, 2).value }],
  [74, { name: "1#电机后轴温度", getData: () => NamePD_52("Equip1RearShaftTmp_AI", operator.NO, null, 2).value }],
  [75, { name: "2#电机后轴温度", getData: () => NamePD_52("Equip2RearShaftTmp_AI", operator.NO, null, 2).value }],
  [76, { name: "3#电机后轴温度", getData: () => NamePD_52("Equip3RearShaftTmp_AI", operator.NO, null, 2).value }],
  [77, { name: "1#电机U相温度", getData: () => NamePD_52("Equip1UTmp_AI", operator.NO, null, 2).value }],
  [78, { name: "2#电机U相温度", getData: () => NamePD_52("Equip2UTmp_AI", operator.NO, null, 2).value }],
  [79, { name: "3#电机U相温度", getData: () => NamePD_52("Equip3UTmp_AI", operator.NO, null, 2).value }],
  // 瞬时流量 - 无tagname，跳过
  [711, { name: "变频1运行电流", getData: () => NamePD_52("Equip1OpCurr_AI", operator.Divide, 10, 2).value }],
  [712, { name: "变频2运行电流", getData: () => NamePD_52("Equip2OpCurr_AI", operator.Divide, 10, 2).value }],
  [713, { name: "变频3运行电流", getData: () => NamePD_52("Equip3OpCurr_AI", operator.Divide, 10, 2).value }],
  [714, { name: "变频1运行功率", getData: () => NamePD_52("Equip1OpPow_AI", operator.Multiply, 0.71, 2).value }],
  [715, { name: "变频2运行功率", getData: () => NamePD_52("Equip2OpPow_AI", operator.Multiply, 0.71, 2).value }],
  [716, { name: "变频3运行功率", getData: () => NamePD_52("Equip3OpPow_AI", operator.Multiply, 0.71, 2).value }],
  [717, { name: "变频1运行频率", getData: () => NamePD_52("Equip1OpFreq_AI", operator.Divide, 100, 2).value }],
  [718, { name: "变频2运行频率", getData: () => NamePD_52("Equip2OpFreq_AI", operator.Divide, 100, 2).value }],
  [719, { name: "变频3运行频率", getData: () => NamePD_52("Equip3OpFreq_AI", operator.Divide, 100, 2).value }],

  // 5-2大巷二部皮带 (系统value: 8)
  [81, { name: "1#电机绕组温度", getData: () => NamePD_52_2("Mot1WindingTemp_AI", operator.NO, null, 2).value }],
  [82, { name: "2#电机绕组温度", getData: () => NamePD_52_2("Mot2WindingTemp_AI", operator.NO, null, 2).value }],
  [83, { name: "3#电机绕组温度", getData: () => NamePD_52_2("Mot3WindingTemp_AI", operator.NO, null, 2).value }],
  [84, { name: "1#电机前轴温度", getData: () => NamePD_52_2("Mot1FrontShaftTemp_AI", operator.NO, null, 2).value }],
  [85, { name: "2#电机前轴温度", getData: () => NamePD_52_2("Mot2FrontShaftTemp_AI", operator.NO, null, 2).value }],
  [86, { name: "3#电机前轴温度", getData: () => NamePD_52_2("Mot3FrontShaftTemp_AI", operator.NO, null, 2).value }],
  [87, { name: "1#电机后轴温度", getData: () => NamePD_52_2("Mot1RearShaftTemp_AI", operator.NO, null, 2).value }],
  [88, { name: "2#电机后轴温度", getData: () => NamePD_52_2("Mot2RearShaftTemp_AI", operator.NO, null, 2).value }],
  [89, { name: "3#电机后轴温度", getData: () => NamePD_52_2("Mot3RearShaftTemp_AI", operator.NO, null, 2).value }],
  [810, { name: "1#电机冷却出口温度", getData: () => NamePD_52_2("Mot1CoolantOutletTemp_AI", operator.NO, null, 2).value }],
  [811, { name: "2#电机冷却出口温度", getData: () => NamePD_52_2("Mot2CoolantOutletTemp_AI", operator.NO, null, 2).value }],
  [812, { name: "3#电机冷却出口温度", getData: () => NamePD_52_2("Mot3CoolantOutletTemp_AI", operator.NO, null, 2).value }],
  [813, { name: "1#电机冷却进口温度", getData: () => NamePD_52_2("Mot1CoolantInletTemp_AI", operator.NO, null, 2).value }],
  [814, { name: "2#电机冷却进口温度", getData: () => NamePD_52_2("Mot2CoolantInletTemp_AI", operator.NO, null, 2).value }],
  [815, { name: "3#电机冷却进口温度", getData: () => NamePD_52_2("Mot3CoolantInletTemp_AI", operator.NO, null, 2).value }],

  // 5-2南一部皮带 (系统value: 9)
  [91, { name: "1#电机运行电流", getData: () => NamePD_52_N("Equip1MotOpCurr_AI", operator.NO, null, 2).value }],
  [92, { name: "2#电机运行电流", getData: () => NamePD_52_N("Equip2MotOpCurr_AI", operator.NO, null, 2).value }],
  [93, { name: "3#电机运行电流", getData: () => NamePD_52_N("Equip3MotOpCurr_AI", operator.NO, null, 2).value }],
  [94, { name: "1#电机运行电压", getData: () => NamePD_52_N("Equip1MotDCVolt_AI", operator.NO, null, 2).value }],
  [95, { name: "2#电机运行电压", getData: () => NamePD_52_N("Equip2MotDCVolt_AI", operator.NO, null, 2).value }],
  [96, { name: "3#电机运行电压", getData: () => NamePD_52_N("Equip3MotDCVolt_AI", operator.NO, null, 2).value }],
  [97, { name: "1号前轴温度", getData: () => NamePD_52_N("Equip1MotFrontShaftTemp_AI", operator.NO, null, 2).value }],
  [98, { name: "2号前轴温度", getData: () => NamePD_52_N("Equip2MotFrontShaftTemp_AI", operator.NO, null, 2).value }],
  [99, { name: "3号前轴温度", getData: () => NamePD_52_N("Equip3MotFrontShaftTemp_AI", operator.NO, null, 2).value }],
  [910, { name: "1号后轴温度", getData: () => NamePD_52_N("Equip1MotRearShaftTemp_AI", operator.NO, null, 2).value }],
  [911, { name: "2号后轴温度", getData: () => NamePD_52_N("Equip2MotRearShaftTemp_AI", operator.NO, null, 2).value }],
  [912, { name: "3号后轴温度", getData: () => NamePD_52_N("Equip3MotRearShaftTemp_AI", operator.NO, null, 2).value }],

  // 主井皮带 (系统value: 10)
  [101, { name: "1#电机电流", getData: () => NamePD_Main("Equip1MotOpCurr_AI", operator.NO, null, 2).value }],
  [102, { name: "2#电机电流", getData: () => NamePD_Main("Equip2MotOpCurr_AI", operator.NO, null, 2).value }],
  [103, { name: "1#电机功率", getData: () => NamePD_Main("Equip1MotOpPower_AI", operator.NO, null, 2).value }],
  [104, { name: "2#电机功率", getData: () => NamePD_Main("Equip2MotOpPower_AI", operator.NO, null, 2).value }],
  [105, { name: "1#电机前轴温度", getData: () => NamePD_Main("Equip1MotFrontShaftTemp_AI", operator.NO, null, 2).value }],
  [106, { name: "2#电机前轴温度", getData: () => NamePD_Main("Equip2MotFrontShaftTemp_AI", operator.NO, null, 2).value }],
  [107, { name: "1#电机后轴温度", getData: () => NamePD_Main("Equip1MotRearShaftTemp_AI", operator.NO, null, 2).value }],
  [108, { name: "2#电机后轴温度", getData: () => NamePD_Main("Equip2MotRearShaftTemp_AI", operator.NO, null, 2).value }],
  [109, { name: "1#电机A相温度", getData: () => NamePD_Main("Equip1MotPhaseATemp_AI", operator.NO, null, 2).value }],
  [1010, { name: "2#电机A相温度", getData: () => NamePD_Main("Equip2MotPhaseATemp_AI", operator.NO, null, 2).value }],
  [1011, { name: "1#电机直流电压", getData: () => NamePD_Main("Equip1MotDCVolt_AI", operator.NO, null, 2).value }],
  [1012, { name: "2#电机直流电压", getData: () => NamePD_Main("Equip2MotDCVolt_AI", operator.NO, null, 2).value }],

  // 101皮带 (系统value: 11)
  [111, { name: "电机电流", getData: () => NamePD_101("Equip1MotCurr_AI", operator.NO, null, 2).value }],
  [112, { name: "电机功率", getData: () => NamePD_101("InvOutputPower_AI", operator.NO, null, 2).value }],
  [113, { name: "A相温度", getData: () => NamePD_101("Equip1MotPhaseATemp_AI", operator.NO, null, 2).value }],
  [114, { name: "B相温度", getData: () => NamePD_101("Equip1MotPhaseBTemp_AI", operator.NO, null, 2).value }],
  [115, { name: "C相温度", getData: () => NamePD_101("Equip1MotPhaseCTemp_AI", operator.NO, null, 2).value }],
  [116, { name: "前轴温度", getData: () => NamePD_101("Equip1MotFrontShaftTemp_AI", operator.NO, null, 2).value }],
  [117, { name: "后轴温度", getData: () => NamePD_101("Equip1MotRearShaftTemp_AI", operator.NO, null, 2).value }],

]);

// 窗口大小变化时调整图表尺寸
const handleResize = () => {
  chartInstance?.resize();
};

/**
 * 一、初始化echarts图表
 */
const initChart = () => {
  if (!chartRef.value) return; // 确保DOM元素存在

  // 如果已有实例，先销毁
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }

  // 1.初始化echarts实例
  chartInstance = echarts.init(chartRef.value);

  // 监听缩放事件
  chartInstance.on("dataZoom", (params: any) => {
    if (params.start !== undefined && params.end !== undefined) {
      currentZoom.value = { start: params.start, end: params.end };
      isManualZooming.value = true;
    }
  });

  // 2.图表配置项
  const option: echarts.EChartsOption = {
    // a.提示信息
    tooltip: {
      trigger: "axis", // 坐标轴触发提示框
      formatter: (params: any) => {
        if (!Array.isArray(params)) return "";
        let tooltip = `时间: ${params[0]?.name || ""}<br/>`;
        params.forEach((param: any, index: number) => {
          const val =
            typeof param.value === "number"
              ? param.value.toFixed(2)
              : param.value;
          tooltip += `${curveNameList.value[index] || "曲线"}: ${val}<br/>`;
        });
        return tooltip;
      }, // 悬浮框提示框
      axisPointer: { animation: false }, // 禁用指针动画
    },
    // b.x轴配置
    xAxis: {
      type: "category", // 类目轴
      data: [], // 初始化为空数组
      boundaryGap: false, // 坐标轴不留白
      axisLabel: {
        formatter: (value: string) => value,
        interval: (i) => i % 1 === 0, // 每1个标签显示一次
        rotate: 30, // 标签旋转30度
        margin: 10, // 标签边距
      },
      axisTick: {
        alignWithLabel: true, // 刻度与标签对齐
      },
      axisLine: {
        show: false // 隐藏x轴线
      },
    },
    // c.y轴配置
    yAxis: {
      type: "value", // 数值轴
      boundaryGap: [0, "10%"], // 坐标轴两端留白比例
      axisLabel: { formatter: (value: number) => value.toFixed(0) }, // 整数刻度
      axisLine: {
        show: false // 隐藏y轴线
      },
    },
    // d.系列数据配置
    series: [], // 初始化为空数组
    // e.网格图表留白
    grid: {
      left: "3%",
      right: "4%",
      bottom: "5%",
      containLabel: true, // 包含坐标轴标签在图表内
    },
    // f.图标最上方的图例数据--点击可以隐藏/展示曲线
    legend: { data: [] }, // 初始化为空数组
  };

  // 3.应用配置
  chartInstance.setOption(option);
};

/**
 * 二、负责更新【ECharts图表】的数据和配置
 */
const updateChartInfo = () => {
  if (!chartInstance) return;

  // 限制最多显示20个点，从最新数据开始截取
  const maxPoints = 20;
  const displayData = dataSinceStart.value.length > maxPoints
    ? dataSinceStart.value.slice(-maxPoints)
    : dataSinceStart.value;

  // 修正这里：使用 displayData 而不是 dataSinceStart.value
  const xData = displayData.map((item) => item.time.slice(11));

  // 准备系列数据
  const seriesData = curveNameList.value.map((name, i) => ({
    name,
    type: "line",
    showSymbol: displayData.length === 1, // 只有一条数据时显示点
    data: displayData.map((item) => item.values[i]), // 当前曲线的所有数据点
    lineStyle: { width: 2, color: curveColorList.value[i] },
    animation: !isManualZooming.value, // 手动缩放时禁用动画
  }));

  // 更新图表配置
  chartInstance.setOption({
    xAxis: {
      data: xData,
      axisLine: {
        show: true // 显示x轴线
      },
      axisLabel: {
        interval: (index) => {
          // 根据数据点数量动态调整标签显示间隔
          const total = xData.length;
          if (total <= 10) return 0; // 10个点以内全部显示
          if (total <= 20) return Math.floor(total / 10); // 10-20个点显示部分
          return Math.floor(total / 5); // 超过20个点显示更少标签
        }
      }
    },
    yAxis: {
      axisLine: {
        show: true // 显示y轴线
      },
    },
    series: seriesData,
    legend: { data: curveNameList.value },

    dataZoom: [
      {
        type: "slider",
        show: true,
        xAxisIndex: 0,
        height: 43,
        bottom: 25,
        start: currentZoom.value.start,
        end: currentZoom.value.end,
        filterMode: "filter",
        realtime: true
      },
      {
        type: "inside",
        xAxisIndex: 0,
        start: currentZoom.value.start,
        end: currentZoom.value.end
      }
    ]
  });
};

/**
 * 三、负责计算和更新【table表格】的数据
 */
const updateTableInfo = () => {
  if (dataSinceStart.value.length === 0 || !animationStartTime.value) return;

  // 为每条曲线计算统计数据
  curveNameList.value.forEach((name, index) => {
    // 所有数据点
    const values = dataSinceStart.value.map((item) => item.values[index]);
    const max = Math.max(...values);
    const min = Math.min(...values);
    const avg = values.reduce((a, b) => a + b, 0) / values.length;

    // 更新表格数据
    tableData.value[index] = {
      name,
      startTime: animationStartTime.value,
      currentTime: dataSinceStart.value[dataSinceStart.value.length - 1].time,
      maxValue: max,
      minValue: min,
      avgValue: avg,
    };
  });
};

/**
 * 四、获取WebSocket数据
 */
const getWebSocketData = (): number[] => {
  const values: number[] = [];

  selectedNodeValues.value.forEach(value => {
    const dataConfig = nodeDataMap.get(value);

    if (dataConfig) {
      try {
        const data = dataConfig.getData();
        const numericValue = typeof data === 'string'
          ? parseFloat(data)
          : Number(data);

        values.push(isNaN(numericValue) ? 0 : numericValue);
      } catch (error) {
        console.error(`获取节点 ${value} 数据失败:`, error);
        values.push(0);
      }
    } else {
      // 未知节点，返回0
      values.push(0);
    }
  });

  return values;
};

/**
 * 五、开始动画
 */
const startAnimation = () => {
  if (isAnimating.value || selectedNodeValues.value.length === 0) return; // 防止重复启动或没有选中节点

  // 重置缩放状态
  resetZoom();
  isManualZooming.value = false;

  // 重置记录变量
  animationStartTime.value = formatTimeFull(new Date()); // 记录当前时间为开始时间
  dataSinceStart.value = []; // 清空历史数据
  chartData.value = []; // 清空图表数据

  // 根据选中的节点设置曲线名称
  curveNameList.value = [];
  selectedNodeValues.value.forEach(value => {
    const dataConfig = nodeDataMap.get(value);
    if (dataConfig) {
      curveNameList.value.push(dataConfig.name);
    } else {
      curveNameList.value.push(`未知参数(${value})`);
    }
  });

  generatedColors.clear(); // 清空旧的颜色集合
  curveColorList.value = curveNameList.value.map(() => getUniqueRandomColor()); //为每条曲线生成唯一颜色

  // 初始化表格数据
  tableData.value = curveNameList.value.map((name) => ({
    name,
    startTime: animationStartTime.value, // 使用记录的开始时间
    currentTime: "-",
    maxValue: null,
    minValue: null,
    avgValue: null,
  }));

  // 添加初始数据点
  const initialData = {
    time: formatTimeFull(new Date()), // 完整时间格式
    values: getWebSocketData(), // 从WebSocket获取数据
  };

  dataSinceStart.value.push(initialData);

  initChart(); // 初始化图表
  updateChartInfo(); //初始化图表后立即渲染初始数据
  updateTableInfo(); //初始化表格数据

  // 启动定时器--每5秒刷新一次，与WebSocket同步
  isAnimating.value = true;
  animationTime = window.setInterval(() => {
    const now = new Date();
    const newTimeFull = formatTimeFull(now);

    // 添加新数据点
    const newData = {
      time: newTimeFull,
      values: getWebSocketData(), // 从WebSocket获取数据
    };

    dataSinceStart.value.push(newData);

    updateChartInfo(); //每次数据更新都会调用，确保图表实时刷新
    updateTableInfo(); //每次数据更新都会调用，确保表格数据实时刷新
  }, updateIntervalTime);
};

/**
 * 六、清空动画
 */
const stopAnimation = () => {
  if (animationTime !== null) {
    clearInterval(animationTime); // 清除定时器
    animationTime = null;
  }
  // 清空树形组件的选中状态
  if (treeRef.value) {
    treeRef.value.setCheckedKeys([]); // 清空所有勾选状态的节点
  }
  selectedNodeValues.value = [] // 清空选中的节点值
  searchKeyword.value = ''
  isAnimating.value = false;
  animationStartTime.value = null; // 重置开始时间
  dataSinceStart.value = []; // 清空开始后的数据集
  tableData.value = []; // 清空表格数据

  // 清空ECharts图表数据
  if (chartInstance) {
    chartInstance.setOption({
      xAxis: {
        data: []
      },
      series: curveNameList.value.map(() => ({
        data: []
      }))
    });
  }

  // 重置图表到初始状态
  initChart();
};

/**
 * 七、重置缩放
 */
const resetZoom = () => {
  currentZoom.value = { start: 0, end: 100 };
  isManualZooming.value = false;
  chartInstance?.dispatchAction({
    type: "dataZoom",
    start: 0,
    end: 100,
    xAxisIndex: 0
  });
};

/* -------------------------- 树形搜索相关 ------------------------- */
// 模拟树形数据
const originalTreeData = ref([
  {
    value: 1,
    label: "2-2大巷皮带",
    children: [
      { value: 11, label: "1#变频器电流" },
      { value: 12, label: "2#变频器电流" },
      { value: 13, label: "3#变频器电流" },
      { value: 14, label: "1#变频器功率" },
      { value: 15, label: "2#变频器功率" },
      { value: 16, label: "3#变频器功率" },
      { value: 17, label: "1#变频器频率" },
      { value: 18, label: "2#变频器频率" },
      { value: 19, label: "3#变频器频率" },
    ],
  },
  {
    value: 2,
    label: "2_2南部",
    children: [
      { value: 21, label: "变频1运行电流" },
      { value: 22, label: "变频2运行电流" },
      { value: 23, label: "变频3运行电流" },
      { value: 24, label: "变频4运行电流" },
      { value: 25, label: "变频5运行电流" },
      { value: 26, label: "变频1运行功率" },
      { value: 27, label: "变频2运行功率" },
      { value: 28, label: "变频3运行功率" },
      { value: 29, label: "变频4运行功率" },
      { value: 210, label: "变频5运行功率" },
      { value: 211, label: "1#电机U相温度" },
      { value: 212, label: "2#电机U相温度" },
      { value: 213, label: "3#电机U相温度" },
      { value: 214, label: "4#电机U相温度" },
      { value: 215, label: "5#电机U相温度" },
      { value: 216, label: "1#电机V相温度" },
      { value: 217, label: "2#电机V相温度" },
      { value: 218, label: "3#电机V相温度" },
      { value: 219, label: "4#电机V相温度" },
      { value: 220, label: "5#电机V相温度" },
      { value: 221, label: "1#电机W相温度" },
      { value: 222, label: "2#电机W相温度" },
      { value: 223, label: "3#电机W相温度" },
      { value: 224, label: "4#电机W相温度" },
      { value: 225, label: "5#电机W相温度" },
      { value: 226, label: "1#电机水平振动" },
      { value: 227, label: "2#电机水平振动" },
      { value: 228, label: "3#电机水平振动" },
      { value: 229, label: "4#电机水平振动" },
      { value: 230, label: "5#电机水平振动" },
      { value: 231, label: "1#电机垂直振动" },
      { value: 232, label: "2#电机垂直振动" },
      { value: 233, label: "3#电机垂直振动" },
      { value: 234, label: "4#电机垂直振动" },
      { value: 235, label: "5#电机垂直振动" },
      { value: 236, label: "1#电机前轴温度" },
      { value: 237, label: "2#电机前轴温度" },
      { value: 238, label: "3#电机前轴温度" },
      { value: 239, label: "4#电机前轴温度" },
      { value: 240, label: "5#电机前轴温度" },
      { value: 241, label: "1#电机后轴温度" },
      { value: 242, label: "2#电机后轴温度" },
      { value: 243, label: "3#电机后轴温度" },
      { value: 244, label: "4#电机后轴温度" },
      { value: 245, label: "5#电机后轴温度" },
      { value: 246, label: "滚筒温度1" },
      { value: 247, label: "滚筒温度2" },
      { value: 248, label: "滚筒温度3" },
      { value: 249, label: "滚筒温度4" },
      { value: 250, label: "换热站供水温度1" },
      { value: 251, label: "换热站供水温度4" },
      { value: 252, label: "换热站回水温度1" },
      { value: 253, label: "换热站回水温度4" },
      { value: 254, label: "1#换热站压力" },
      { value: 255, label: "4#换热站压力" },
    ],
  },
  {
    value: 3,
    label: "3-1大巷皮带",
    children: [
      { value: 31, label: "1#电机前轴温度" },
      { value: 32, label: "2#电机前轴温度" },
      { value: 33, label: "3#电机前轴温度" },
      { value: 34, label: "1#电机后轴温度" },
      { value: 35, label: "2#电机后轴温度" },
      { value: 36, label: "3#电机后轴温度" },
      { value: 37, label: "1#电机U相温度" },
      { value: 38, label: "2#电机U相温度" },
      { value: 39, label: "3#电机U相温度" },
      { value: 310, label: "变频1运行电流" },
      { value: 311, label: "变频2运行电流" },
      { value: 312, label: "变频3运行电流" },
      { value: 313, label: "变频1运行功率" },
      { value: 314, label: "变频2运行功率" },
      { value: 315, label: "变频3运行功率" },
      { value: 316, label: "变频1运行频率" },
      { value: 317, label: "变频2运行频率" },
      { value: 318, label: "变频3运行频率" },
    ],
  },
  {
    value: 4,
    label: "4-2大巷一部皮带",
    children: [
      { value: 41, label: "1#电机前轴温度" },
      { value: 42, label: "2#电机前轴温度" },
      { value: 43, label: "3#电机前轴温度" },
      { value: 44, label: "1#电机后轴温度" },
      { value: 45, label: "2#电机后轴温度" },
      { value: 46, label: "3#电机后轴温度" },
      { value: 47, label: "1#电机U相温度" },
      { value: 48, label: "2#电机U相温度" },
      { value: 49, label: "3#电机U相温度" },
      { value: 410, label: "变频1运行电流" },
      { value: 411, label: "变频2运行电流" },
      { value: 412, label: "变频3运行电流" },
      { value: 413, label: "变频1运行功率" },
      { value: 414, label: "变频2运行功率" },
      { value: 415, label: "变频3运行功率" },
      { value: 416, label: "变频1运行频率" },
      { value: 417, label: "变频2运行频率" },
      { value: 418, label: "变频3运行频率" },
    ],
  },
  {
    value: 5,
    label: "4-2大巷二部皮带",
    children: [
      { value: 51, label: "1#电机绕组温度" },
      { value: 52, label: "2#电机绕组温度" },
      { value: 53, label: "3#电机绕组温度" },
      { value: 54, label: "1#电机前轴温度" },
      { value: 55, label: "2#电机前轴温度" },
      { value: 56, label: "3#电机前轴温度" },
      { value: 57, label: "1#电机后轴温度" },
      { value: 58, label: "2#电机后轴温度" },
      { value: 59, label: "3#电机后轴温度" },
      { value: 510, label: "1#电机冷却出口温度" },
      { value: 511, label: "2#电机冷却出口温度" },
      { value: 512, label: "3#电机冷却出口温度" },
      { value: 513, label: "1#电机冷却进口温度" },
      { value: 514, label: "2#电机冷却进口温度" },
      { value: 515, label: "3#电机冷却进口温度" },
    ],
  },
  {
    value: 6,
    label: "4-2南一部皮带",
    children: [
      { value: 61, label: "1#电机绕组温度" },
      { value: 62, label: "2#电机绕组温度" },
      { value: 63, label: "3#电机绕组温度" },
      { value: 64, label: "1#电机前轴温度" },
      { value: 65, label: "2#电机前轴温度" },
      { value: 66, label: "3#电机前轴温度" },
      { value: 67, label: "1#电机后轴温度" },
      { value: 68, label: "2#电机后轴温度" },
      { value: 69, label: "3#电机后轴温度" },
      { value: 610, label: "1#电机冷却出口温度" },
      { value: 611, label: "2#电机冷却出口温度" },
      { value: 612, label: "3#电机冷却出口温度" },
      { value: 613, label: "1#电机冷却进口温度" },
      { value: 614, label: "2#电机冷却进口温度" },
      { value: 615, label: "3#电机冷却进口温度" },
    ],
  },
  {
    value: 7,
    label: "5-2大巷一部皮带",
    children: [
      { value: 71, label: "1#电机前轴温度" },
      { value: 72, label: "2#电机前轴温度" },
      { value: 73, label: "3#电机前轴温度" },
      { value: 74, label: "1#电机后轴温度" },
      { value: 75, label: "2#电机后轴温度" },
      { value: 76, label: "3#电机后轴温度" },
      { value: 77, label: "1#电机U相温度" },
      { value: 78, label: "2#电机U相温度" },
      { value: 79, label: "3#电机U相温度" },
      { value: 711, label: "变频1运行电流" },
      { value: 712, label: "变频2运行电流" },
      { value: 713, label: "变频3运行电流" },
      { value: 714, label: "变频1运行功率" },
      { value: 715, label: "变频2运行功率" },
      { value: 716, label: "变频3运行功率" },
      { value: 717, label: "变频1运行频率" },
      { value: 718, label: "变频2运行频率" },
      { value: 719, label: "变频3运行频率" },
    ],
  },
  {
    value: 8,
    label: "5-2大巷二部皮带",
    children: [
      { value: 81, label: "1#电机绕组温度" },
      { value: 82, label: "2#电机绕组温度" },
      { value: 83, label: "3#电机绕组温度" },
      { value: 84, label: "1#电机前轴温度" },
      { value: 85, label: "2#电机前轴温度" },
      { value: 86, label: "3#电机前轴温度" },
      { value: 87, label: "1#电机后轴温度" },
      { value: 88, label: "2#电机后轴温度" },
      { value: 89, label: "3#电机后轴温度" },
      { value: 810, label: "1#电机冷却出口温度" },
      { value: 811, label: "2#电机冷却出口温度" },
      { value: 812, label: "3#电机冷却出口温度" },
      { value: 813, label: "1#电机冷却进口温度" },
      { value: 814, label: "2#电机冷却进口温度" },
      { value: 815, label: "3#电机冷却进口温度" },
    ],
  },
  {
    value: 9,
    label: "5-2南一部皮带",
    children: [
      { value: 91, label: "1#电机运行电流" },
      { value: 92, label: "2#电机运行电流" },
      { value: 93, label: "3#电机运行电流" },
      { value: 94, label: "1#电机运行电压" },
      { value: 95, label: "2#电机运行电压" },
      { value: 96, label: "3#电机运行电压" },
      { value: 97, label: "1号前轴温度" },
      { value: 98, label: "2号前轴温度" },
      { value: 99, label: "3号前轴温度" },
      { value: 910, label: "1号后轴温度" },
      { value: 911, label: "2号后轴温度" },
      { value: 912, label: "3号后轴温度" },
    ],
  },
  {
    value: 10,
    label: "主井皮带",
    children: [
      { value: 101, label: "1#电机电流" },
      { value: 102, label: "2#电机电流" },
      { value: 103, label: "1#电机功率" },
      { value: 104, label: "2#电机功率" },
      { value: 105, label: "1#电机前轴温度" },
      { value: 106, label: "2#电机前轴温度" },
      { value: 107, label: "1#电机后轴温度" },
      { value: 108, label: "2#电机后轴温度" },
      { value: 109, label: "1#电机A相温度" },
      { value: 1010, label: "2#电机A相温度" },
      { value: 1011, label: "1#电机直流电压" },
      { value: 1012, label: "2#电机直流电压" },
    ],
  },
  {
    value: 110,
    label: "101皮带",
    children: [
      { value: 111, label: "电机电流" },
      { value: 112, label: "电机功率" },
      { value: 113, label: "A相温度" },
      { value: 114, label: "B相温度" },
      { value: 115, label: "C相温度" },
      { value: 116, label: "前轴温度" },
      { value: 117, label: "后轴温度" },
    ],
  },
]);

const searchKeyword = ref(""); // 搜索关键字
const treeRef = ref(null); // 树形组件引用
const treeProps = {
  // 树形组件配置
  children: "children",
  label: "label",
};

// 计算属性：过滤后的树形数据
const filteredTreeData = computed(() => {
  if (!searchKeyword.value) return originalTreeData.value;
  return filterTreeData(originalTreeData.value, searchKeyword.value);
});

// 递归过滤树形数据
const filterTreeData = (data, keyword) => {
  return data
    .map((item) => ({ ...item })) // 浅拷贝避免修改原数据
    .filter((item) => {
      // 如果节点匹配，保留整个节点
      if (item.label.includes(keyword)) return true;

      // 如果有子节点，递归过滤
      if (item.children) {
        item.children = filterTreeData(item.children, keyword);
        return item.children.length > 0;
      }

      return false;
    });
};

// 搜索输入处理
const handleSearch = () => {
  treeRef.value?.filter(searchKeyword.value);
};

// Element Tree 的过滤方法（备用方案）
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

// 处理树节点选中事件
const handleCheck = (data, checked) => {
  // 获取所有选中的节点
  const checkedNodes = treeRef.value?.getCheckedNodes() || [];

  // 只选择叶子节点（没有children的节点）
  const leafNodes = checkedNodes.filter(node => !node.children || node.children.length === 0);

  // 获取选中节点的value值
  selectedNodeValues.value = leafNodes.map(node => node.value);

  console.log('选中的节点值:', selectedNodeValues.value);
};

/* -------------------------- 生命周期 ------------------------- */
onMounted(() => {
  initChart(); // 初始化图表：确保组件挂载时有一个合法的 ECharts 实例，避免 chartRef 未绑定的错误。ps：此时图表是空的，等待后续数据更新。
  window.addEventListener("resize", handleResize); // 添加窗口大小变化监听
});

onBeforeUnmount(() => {
  stopAnimation(); // 清空动画
  chartInstance?.dispose(); // 销毁图表实例
  chartInstance = null;
  window.removeEventListener("resize", handleResize); // 移除事件监听
});
</script>

<style scoped>
.cardBox {
  background-color: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  border: 1px solid var(--el-border-color-light);
}

.curve-container {
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

h2 {
  text-align: center;
  margin: 0;
  color: #333;
}

.chart-container {
  width: 100%;
  height: 40vh;
  margin-top: 10px;
  padding-top: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.data-table {
  margin-top: 30px;
  width: 100%;
}

.search-tree-container {
  width: 100%;
  padding: 20px;
}

.el-tree {
  margin-top: 10px;
}
</style>